import {
  getAllDevice
} from "@/services/device/energyEfficiencyBoard"
import { DeviceList, Option } from './deviceType'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import EnergyEfficiencyBoardContent from './energyEfficiencyBoardContent';
import styles from './style.less';
import { Tabs, TabsProps, Tree, TreeDataNode, TreeProps } from 'antd';
import { AlignLeftOutlined, DesktopOutlined } from '@ant-design/icons';
import { useEffect, useState } from "react";
import { getDeIds } from "@/services/device/energyInfo";
const EnergyEfficiencyBoard: React.FC<{}> = () => {
  const [deviceList, setDeviceList] = useState<DeviceList[] | undefined>(undefined);//设备树
  const [deviceOption, setDeviceOption] = useState<Option[] | undefined>(undefined);//设备树
  const [selectedDevice, setSelectedDevice] = useState<string | undefined>(undefined);//选择的设备编号
  const [selectedEnergyType, setSelectedEnergyType] = useState<string | undefined>("水");//水电气能效类型
  const energyTypeMap = new Map([['1', '水'], ["2", "电"], ['3', '气']])
  useEffect(() => {
    try {
      getDeviceList();
    } catch (error) {
      throw new Error("加载设备列表信息失败！")
    }
  }, [])
  //水电气能效tabs页item
  const energyBoardTabsItem: TabsProps['items'] = [
    {
      key: '1',
      label: '水',
      children: (
        <EnergyEfficiencyBoardContent energyItem={selectedEnergyType} deviceName={selectedDevice} deviceOption={deviceOption}></EnergyEfficiencyBoardContent>
      ),
    },
    {
      key: '2',
      label: '电',
      children: (
        <EnergyEfficiencyBoardContent energyItem={selectedEnergyType} deviceName={selectedDevice} deviceOption={deviceOption}></EnergyEfficiencyBoardContent>
      ),
    },
    {
      key: '3',
      label: '气',
      children: (
        <EnergyEfficiencyBoardContent energyItem={selectedEnergyType} deviceName={selectedDevice} deviceOption={deviceOption}></EnergyEfficiencyBoardContent>
      ),
    },
  ];
  /* 设备树数据 */
  const deviceTreeData: TreeDataNode[] = [
    {
      title: '设备列表',
      key: '0',
      icon: <AlignLeftOutlined />,
      children: deviceList,
    },
  ];
  //设备树选择回调
  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info, info?.node?.title);
    setSelectedDevice(info?.node?.title);
    console.log('selected', selectedKeys, info);

  };
  //设备树展开回调
  // const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {
  //   console.log('selected', checkedKeys, info, info?.checkedNodes[0]?.title);
  //   setSelectedDevice(info?.checkedNodes[0]?.title);
  // };
  //tabs页切换回调
  const onChange = (key: string) => {
    console.log(energyTypeMap.get(key));
    setSelectedEnergyType(energyTypeMap.get(key))
  };
  //获取设备列表
  const getDeviceList = async () => {
    const data = await getAllDevice(null);
    const resultId = await getDeIds(null);
    const tempCode: any[] = [];
    resultId.data.map((item: any) => {
      tempCode.push({ label: item, value: item });
    });
    console.log("deviceList", tempCode);
    // setDeviceId(tempCode);
    console.log('获得的id', resultId);
    const newDeviceList = data.data.map((item: string, index: number) => {
      console.log(item);

      return { title: item ? item : 'null', key: "0-" + index, icon: <DesktopOutlined /> }
    })
    const deviceOption = data.data.map((item: string) => {
      return { label: item, value: item }
    })
    console.log("newDeviceList", newDeviceList);
    console.log("deviceOption", deviceOption);

    //设置初始设备列表和选中设备
    setDeviceList(newDeviceList)
    setDeviceOption(deviceOption)
  }

  return (
    <PageHeaderWrapper
      title={false}
      breadcrumb={undefined}
      className={styles.energyEfficiencyBoard}
    >
      <div className={styles.container}>
        <div className={styles.left}>
          <Tree
            checkable
            showIcon
            onSelect={onSelect}
            // onCheck={onCheck}
            treeData={deviceTreeData}
            defaultExpandedKeys={['0']}
            defaultCheckedKeys={['0-0']}
            // defaultSelectedKeys={['0-0']}
            checkable={false}
            blockNode
          />
        </div>
        <div className={styles.right}>
          <Tabs
            onChange={onChange}
            type="card"
            items={energyBoardTabsItem}
            defaultActiveKey="1"
            size="middle"
            destroyInactiveTabPane
          />
        </div>
      </div>
    </PageHeaderWrapper>
  );
};
export default EnergyEfficiencyBoard;
